<template>
	<div>
		<div ref="echarts" class="echarts" v-show="list && list.length">
		</div>
		<noData  v-show="!list || !list.length"></noData>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import noData from "./noData.vue";
	export default {
		data:()=>{
			return {
				myCharts:''
			}
		},
		components:{
			noData
		},
		props:{
			color:{
        type:String,
        defalut:'#FF9E9E'
			},
			list:{
				type:Array
      },
      title:{
        type:String
			},
			limit:{
				type:Boolean,
				defalut:true,
			}
		},
		mounted() {
			this.init();
			this.setOption()
		},
		methods:{
			init() {
				this.myCharts = echarts.init(this.$refs['echarts'])
				window.addEventListener('resize',()=>{ 
					this.myCharts.resize() 
				})
			},
			setOption(){
        console.log(this.list)
				var _max=0;
				var data = [],
				yAxis = [];
				if(this.list && this.list.length){
					this.list.forEach((item,idx)=>{
						if(item.value>_max){
							_max = item.value;
						}
						data.push({
							value:item.value,
							name:item.name,
							itemStyle:{
								color:this.color
							}
						})
						yAxis.push(item.name)
					})
				}
				this.myCharts.setOption({
					tooltip : {
						trigger: 'axis',
          },
					grid: {
						left: '1%',
						right: '2%',
						bottom: '1%',
						top:'8%',
						containLabel: true
					},
					xAxis:  { 
						type: 'category',
						//max: _max+_max*0.1,
						data: yAxis, 
						nameLocation:'start',  
						nameTextStyle:{
							verticalAlign:"bottom",align:'center',color:'#1B8484'
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: true
						},
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						data: yAxis,
						name:this.yAxisName,
						nameTextStyle:{
							verticalAlign:"top",align:'left',color:'#1B8484'
						},
						axisLine: {
							show: true
						},
						//axisLabel:{show:false},
						axisTick: {
							show: false
						},
						splitLine: {
							show: true
						}
						// axisLabel: {
						// 	fontSize: 16,
						// 	color: '#fff'

						// },
						// axisLine: {
						// 	show: false
						// },
						// axisTick: {
						// 	show: false
						// },
						// splitLine: {
						// 	show: false
						// }
					},
					series: [{
						type: 'bar',
						stack: '6',
						// label: _label,
						legendHoverLink: true,
						barWidth: 10,
						label: {
							"normal": {
								"show": true,
								"position": "top",
								"color":'#333'
							}
						},
						data: data
					}]
				});
			}
		},
		watch:{
			list:{
				deep:true,
				handler(){
					this.$nextTick(() => {
						this.setOption()
						this.myCharts.resize()
					})
				}
			}
		}
	}
</script>

<style  scoped="scoped" lang="scss">
	.echarts{
    width: 100%;
    height: 400px;
	}
</style>
